<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 徽章（Badges）</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<!-- <a href="#">未读邮件<span class="badge">50</span></a> -->
    <h4>胶囊式导航中的激活状态</h4>
    <ul class="nav nav-pills">
            <li class="active"><a href="#">首页<span class="badge">42</span></a></li>
            <li><a href="#">简介</a></li>
            <li ><a href="#">消息<span class="badge">3</span></a></li>
    </ul>
    <h4>
        列表导航中的激活状态
    </h4>
    <ul class="nav nav-pills nav-stacked" style="max-width:260px;">
        <li class="active"><a href="#"><span class="badge pull-right">43</span>首页</a></li>
        <li> <a href="#">简介</a></li>
        <li><a href="#"><span class="badge pull-right">3</span>消息</a></li>
    </ul>
</body>
</html>